<template>
  <div class="myContainer">
    <div class="myNav">
      <span class="myNavItem iconfont icon-pingfen isLight">订阅</span>
      <span class="myNavItem iconfont icon-gongsibeifen3">听过</span>
      <span class="myNavItem iconfont icon-yigou">已购</span>
      <span class="myNavItem iconfont icon-xihuan0102">喜欢</span>
    </div>
    <div class="MyMain">
      <div class="navBar">
        <span class="dingyue">共订阅6张专辑</span>
        <span class="right0">
          <i class="iconfont icon-ziyuan"></i>
          <i class="iconfont icon-mulu isLight"></i>
        </span>
      </div>
      <div class="sort classify">
        <span class="firstItem">排序</span>
        <span class="item isLight">最近更新</span>
        <span class="item">最近订阅</span>
        <span class="item">最近常听</span>
      </div>
      <div class="sort classify">
        <span class="firstItem">分类</span>
        <span class="item isLight">全部6</span>
        <span class="item">有声书4</span>
        <span class="item">儿童1</span>
        <span class="item">音乐1</span>
      </div>
      <ul class="myList">
        <li class="myListItem">
          <img
            class="ItemImg"
            src="../../assets/images/CMCoOSIEKcyOABEA4wCUHS38.webp"
            alt=""
          />
          <div class="imgLeft">
            <span class="imgIntro"
              >鬼吹灯2丨系列合集丨天下霸唱著丨有声的紫襟领衔多人有声剧</span
            >
            <span class="tingCount"
              >含黄皮子坟、南海归墟、怒晴湘西、巫峡棺山</span
            >
            <div class="author">
              <img
                class="authorImg"
                src="../../assets\images\CMCoOR8EDw_4AADBsgCMSZ9J.jpg"
                alt=""
              />
              <span class="authorBook">有声的紫襟&nbsp;|&nbsp;有声书</span>
            </div>
            <div class="states">
              <span class="time">18小时前&nbsp;更新：</span>
              <span class="zhangjie"
                >鬼吹灯2【巫峡棺山】第318集 潜逃者（下）</span
              >
              <span class="allJi">共318集</span>
            </div>
          </div>
          <div class="iconfont icon-shezhi"></div>
        </li>
        <li class="myListItem">
          <img
            class="ItemImg"
            src="../../assets/images/CMCoOSIEKcyOABEA4wCUHS38.webp"
            alt=""
          />
          <div class="imgLeft">
            <span class="imgIntro"
              >鬼吹灯2丨系列合集丨天下霸唱著丨有声的紫襟领衔多人有声剧</span
            >
            <span class="tingCount"
              >含黄皮子坟、南海归墟、怒晴湘西、巫峡棺山</span
            >
            <div class="author">
              <img
                class="authorImg"
                src="../../assets\images\CMCoOR8EDw_4AADBsgCMSZ9J.jpg"
                alt=""
              />
              <span class="authorBook">有声的紫襟&nbsp;|&nbsp;有声书</span>
            </div>
            <div class="states">
              <span class="time">18小时前&nbsp;更新：</span>
              <span class="zhangjie"
                >鬼吹灯2【巫峡棺山】第318集 潜逃者（下）</span
              >
              <span class="allJi">共318集</span>
            </div>
          </div>
          <div class="iconfont icon-shezhi"></div>
        </li>
        <li class="myListItem">
          <img
            class="ItemImg"
            src="../../assets/images/CMCoOSIEKcyOABEA4wCUHS38.webp"
            alt=""
          />
          <div class="imgLeft">
            <span class="imgIntro"
              >鬼吹灯2丨系列合集丨天下霸唱著丨有声的紫襟领衔多人有声剧</span
            >
            <span class="tingCount"
              >含黄皮子坟、南海归墟、怒晴湘西、巫峡棺山</span
            >
            <div class="author">
              <img
                class="authorImg"
                src="../../assets\images\CMCoOR8EDw_4AADBsgCMSZ9J.jpg"
                alt=""
              />
              <span class="authorBook">有声的紫襟&nbsp;|&nbsp;有声书</span>
            </div>
            <div class="states">
              <span class="time">18小时前&nbsp;更新：</span>
              <span class="zhangjie"
                >鬼吹灯2【巫峡棺山】第318集 潜逃者（下）</span
              >
              <span class="allJi">共318集</span>
            </div>
          </div>
          <div class="iconfont icon-shezhi"></div>
        </li>
        <li class="myListItem">
          <img
            class="ItemImg"
            src="../../assets/images/CMCoOSIEKcyOABEA4wCUHS38.webp"
            alt=""
          />
          <div class="imgLeft">
            <span class="imgIntro"
              >鬼吹灯2丨系列合集丨天下霸唱著丨有声的紫襟领衔多人有声剧</span
            >
            <span class="tingCount"
              >含黄皮子坟、南海归墟、怒晴湘西、巫峡棺山</span
            >
            <div class="author">
              <img
                class="authorImg"
                src="../../assets\images\CMCoOR8EDw_4AADBsgCMSZ9J.jpg"
                alt=""
              />
              <span class="authorBook">有声的紫襟&nbsp;|&nbsp;有声书</span>
            </div>
            <div class="states">
              <span class="time">18小时前&nbsp;更新：</span>
              <span class="zhangjie"
                >鬼吹灯2【巫峡棺山】第318集 潜逃者（下）</span
              >
              <span class="allJi">共318集</span>
            </div>
          </div>
          <div class="iconfont icon-shezhi"></div>
        </li>
        <li class="myListItem">
          <img
            class="ItemImg"
            src="../../assets/images/CMCoOSIEKcyOABEA4wCUHS38.webp"
            alt=""
          />
          <div class="imgLeft">
            <span class="imgIntro"
              >鬼吹灯2丨系列合集丨天下霸唱著丨有声的紫襟领衔多人有声剧</span
            >
            <span class="tingCount"
              >含黄皮子坟、南海归墟、怒晴湘西、巫峡棺山</span
            >
            <div class="author">
              <img
                class="authorImg"
                src="../../assets\images\CMCoOR8EDw_4AADBsgCMSZ9J.jpg"
                alt=""
              />
              <span class="authorBook">有声的紫襟&nbsp;|&nbsp;有声书</span>
            </div>
            <div class="states">
              <span class="time">18小时前&nbsp;更新：</span>
              <span class="zhangjie"
                >鬼吹灯2【巫峡棺山】第318集 潜逃者（下）</span
              >
              <span class="allJi">共318集</span>
            </div>
          </div>
          <div class="iconfont icon-shezhi"></div>
        </li>
        <li class="myListItem">
          <img
            class="ItemImg"
            src="../../assets/images/CMCoOSIEKcyOABEA4wCUHS38.webp"
            alt=""
          />
          <div class="imgLeft">
            <span class="imgIntro"
              >鬼吹灯2丨系列合集丨天下霸唱著丨有声的紫襟领衔多人有声剧</span
            >
            <span class="tingCount"
              >含黄皮子坟、南海归墟、怒晴湘西、巫峡棺山</span
            >
            <div class="author">
              <img
                class="authorImg"
                src="../../assets\images\CMCoOR8EDw_4AADBsgCMSZ9J.jpg"
                alt=""
              />
              <span class="authorBook">有声的紫襟&nbsp;|&nbsp;有声书</span>
            </div>
            <div class="states">
              <span class="time">18小时前&nbsp;更新：</span>
              <span class="zhangjie"
                >鬼吹灯2【巫峡棺山】第318集 潜逃者（下）</span
              >
              <span class="allJi">共318集</span>
            </div>
          </div>
          <div class="iconfont icon-shezhi"></div>
        </li>
      </ul>
    </div>
    <div class="myLeft">
      <div class="person">
        <div class="personIntro">
          <img
            class="personImg"
            src="../../assets\images\CMCoOR8EDw_4AADBsgCMSZ9J.jpg"
            alt=""
          />
          <span class="personDetail">听友326500607</span>
        </div>
        <div class="sign">该用户很懒，没有留下任何东西~</div>
        <div class="account">账号设置&nbsp;></div>
      </div>
      <div class="album">
        <div class="albumHeader">
          <i class="iconfont icon-zuanshi"></i>相关推荐
          <span class="getMore iconfont icon-huanyipi">换一批</span>
        </div>
        <ul class="albumList">
          <li class="albumListItem">
            <img
              class="ItemImg"
              src="../../assets\images\CMCoOSIEKcyOABEA4wCUHS38.webp"
              alt=""
            />
            <div class="imgLeft">
              <span class="imgIntro">猎罪者（阴间神探 | 有声的紫襟）</span>
              <span class="tingCount">有声的紫襟</span>
            </div>
          </li>
          <li class="albumListItem">
            <img
              class="ItemImg"
              src="../../assets\images\wKgO215rRw-Qw9vgAAnDwLnGBcU045.webp"
              alt=""
            />
            <div class="imgLeft">
              <span class="imgIntro"
                >一剑独尊（叶玄叶灵 | 有声的紫襟 | 男女双播）</span
              >
              <span class="tingCount">有声的紫襟</span>
            </div>
          </li>
          <li class="albumListItem">
            <img
              class="ItemImg"
              src="../../assets\images\CMCoOSIEKcyOABEA4wCUHS38.webp"
              alt=""
            />
            <div class="imgLeft">
              <span class="imgIntro">猎罪者（阴间神探 | 有声的紫襟）</span>
              <span class="tingCount">有声的紫襟</span>
            </div>
          </li>
          <li class="albumListItem">
            <img
              class="ItemImg"
              src="../../assets\images\wKgO215rRw-Qw9vgAAnDwLnGBcU045.webp"
              alt=""
            />
            <div class="imgLeft">
              <span class="imgIntro"
                >一剑独尊（叶玄叶灵 | 有声的紫襟 | 男女双播）</span
              >
              <span class="tingCount">有声的紫襟</span>
            </div>
          </li>
          <li class="albumListItem">
            <img
              class="ItemImg"
              src="../../assets\images\CMCoOSIEKcyOABEA4wCUHS38.webp"
              alt=""
            />
            <div class="imgLeft">
              <span class="imgIntro">猎罪者（阴间神探 | 有声的紫襟）</span>
              <span class="tingCount">有声的紫襟</span>
            </div>
          </li>
          <li class="albumListItem">
            <img
              class="ItemImg"
              src="../../assets\images\wKgO215rRw-Qw9vgAAnDwLnGBcU045.webp"
              alt=""
            />
            <div class="imgLeft">
              <span class="imgIntro"
                >一剑独尊（叶玄叶灵 | 有声的紫襟 | 男女双播）</span
              >
              <span class="tingCount">有声的紫襟</span>
            </div>
          </li>
          <li class="albumListItem">
            <img
              class="ItemImg"
              src="../../assets\images\CMCoOSIEKcyOABEA4wCUHS38.webp"
              alt=""
            />
            <div class="imgLeft">
              <span class="imgIntro">猎罪者（阴间神探 | 有声的紫襟）</span>
              <span class="tingCount">有声的紫襟</span>
            </div>
          </li>
          <li class="albumListItem">
            <img
              class="ItemImg"
              src="../../assets\images\wKgO215rRw-Qw9vgAAnDwLnGBcU045.webp"
              alt=""
            />
            <div class="imgLeft">
              <span class="imgIntro"
                >一剑独尊（叶玄叶灵 | 有声的紫襟 | 男女双播）</span
              >
              <span class="tingCount">有声的紫襟</span>
            </div>
          </li>
          <li class="albumListItem">
            <img
              class="ItemImg"
              src="../../assets\images\CMCoOSIEKcyOABEA4wCUHS38.webp"
              alt=""
            />
            <div class="imgLeft">
              <span class="imgIntro">猎罪者（阴间神探 | 有声的紫襟）</span>
              <span class="tingCount">有声的紫襟</span>
            </div>
          </li>
          <li class="albumListItem">
            <img
              class="ItemImg"
              src="../../assets\images\wKgO215rRw-Qw9vgAAnDwLnGBcU045.webp"
              alt=""
            />
            <div class="imgLeft">
              <span class="imgIntro"
                >一剑独尊（叶玄叶灵 | 有声的紫襟 | 男女双播）</span
              >
              <span class="tingCount">有声的紫襟</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "My",
  data() {
    return {};
  },
  computed: {
    ...mapState({
      myList: (state) => state.myList.myList,
      relateList: (state) => state.relate.relateList,
    }),
  },
  methods: {
    ...mapActions("myList", ["getMyList"]),
    ...mapActions("relate", ["getRelateList"]),
  },
  mounted() {
    this.getMyList();
    this.getRelateList();
  },
};
</script>

<style scoped>
.myContainer {
  position: relative;
  width: 1080px;
  margin: 0 auto;
}
.myNav {
  width: 820px;
  padding: 15px 0 15px 20px;
}
.myNav .myNavItem {
  font-size: 18px;
  color: #72727b;
  margin: 0 20px 0 0;
  padding: 0 10px;
  cursor: pointer;
}
.myNav .isLight {
  color: #f86442;
}
.MyMain {
  padding: 15px 20px 0;
}
.MyMain .navBar {
  font-size: 14px;
  background-color: #fafafa;
  height: 50px;
  width: 780px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.MyMain .navBar .dingyue {
  color: #40404c;
  line-height: 50px;
  padding: 0 0 0 10px;
}
.MyMain .navBar .right0 {
  float: right;
  line-height: 50px;
}
.MyMain .navBar .right0 i {
  padding: 0 15px;
  font-size: 24px;
}
.MyMain .navBar .right0 .isLight {
  color: #f86442;
}
.sort.classify {
  padding: 18px 0 0;
  border-bottom: 1px dashed #e8e8e8;
  width: 780px;
}
.sort.classify .firstItem {
  display: inline-block;
  margin: 0 36px 16px 0;
  font-size: 14px;
  color: #aaa;
}
.sort.classify .item {
  margin: 0 36px 16px 0;
  font-size: 14px;
  color: #666;
}
.sort.classify .isLight {
  color: #f86442;
}
.myList {
  margin-top: 30px;
  padding: 0;
}
.myList .myListItem {
  position: relative;
  display: flex;
  list-style: none;
  padding: 10px 0;
  border-bottom: 1px dashed #e8e8e8;
  margin: 0 0 32px 0;
  width: 780px;
}
.myListItem .ItemImg {
  margin-right: 20px;
  height: 146px;
  width: 146px;
  border-radius: 12px;
}
.myListItem .imgLeft {
  width: 514px;
}
.myListItem .imgLeft .imgIntro {
  font-size: 20px;
  color: #40404c;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.myListItem .tingCount {
  display: inline-block;
  height: 36px;
  font-size: 12px;
  color: #555;
  margin: 15px 0 0 0px;
}
.author {
  position: relative;
  height: 20px;
  line-height: 20px;
  margin: 0 0 30px;
}
.author .authorImg {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 20px;
}
.author .authorBook {
  position: absolute;
  color: #999;
  font-size: 12px;
}
.states {
  color: #555;
  font-size: 12px;
}
.states .allJi {
  float: right;
}
.icon-shezhi {
  position: absolute;
  right: 0;
  top: 0;
}
.myLeft {
  position: absolute;
  right: 0;
  top: 0;
  width: 240px;
  height: 1022px;
}
.myLeft .person {
  margin: 0 0 20px;
  padding: 20px 10px 10px;
}
.myLeft .person .personIntro {
  display: flex;
  position: relative;
  margin: 0 0 10px;
}
.myLeft .person .personIntro .personImg {
  width: 40px;
  height: 40px;
  margin: 0 10px 0 0;
  border-radius: 50%;
}
.myLeft .person .personIntro .personDetail {
  position: absolute;
  color: #40404c;
  font-size: 14px;
  left: 60px;
}
.person .sign {
  color: #a3a3ac;
  font-size: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}
.person .account {
  font-size: 12px;
  color: #72727b;
  padding: 10px 0 0;
  text-align: center;
}
</style>
